<template>
  <!-- 页面-角色管理-选择菜单 -->
  <div style="height: 460px;" class="role-select-menu-wrap">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="menuSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 功能组编码 -->
        <Form-item prop="menuCode" :label="$t('module.menuManage.menuCode')">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.menuCode"
            :placeholder="$t('module.role.warning.enterMenuCode')"
            
            @on-enter="search"
          />
        </Form-item>
        <!-- 功能组名称 -->
        <Form-item prop="menuName" :label="$t('module.menuManage.menuName')">
          <Input
            type="text"
            :maxlength="30"
            v-model="searchForm.menuName"
            :placeholder="$t('module.role.warning.enterMenuName')"
            
            @on-enter="search"
          />
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="menuTable" :config="menuTableConfig">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import roleAPI from "@/api/roleApi.js";
import { roleSelectMenuColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    },
    menuTypeList: {
      type: Object,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      searchForm: {
        roleId: this.roleId,
        menuName: "",
        menuCode: "",
        enabled: 1
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {
    menuTableConfig() {
      return {
        loadDataFn: this.queryUnassignedMenu,
        initParam: {
          roleId: this.roleId,
          enabled: 1 //0-有效，1-无效。这里只取有效菜单
        },
        columnsFn: roleSelectMenuColumns.bind(this),
        autoFirst: true
      };
    }
  },
  created: function() {
    this.$emit("SetTitle", this.$t("module.menuManage.titleSelectMenu"));
    this.$emit("SetPageWidth", 850);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    queryUnassignedMenu({ responseProcess, param }) {
      roleAPI.queryUnassignedMenu(param).then(data => {
        data.records.forEach(menu => {
          menu.menuTypeName = this.menuTypeList[menu.menuType];
        });
        responseProcess(data);
      });
    },
    search(page) {
      this.$refs["menuTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["menuSearchForm"].resetFields();
      this.search(1);
    },
    save() {
      let selectedMenu = this.$refs["menuTable"].getSelectioned();
      // 如果未勾选菜单，无需保存
      if (!selectedMenu || selectedMenu.length == 0) {
        this.$message.error({
          content: this.$t("module.menuManage.warning.selectAssignMenu"),
          duration: 3
        });
        return;
      }
      selectedMenu.forEach(menu => {
        menu.roleId = this.roleId;
      });
      let param = {
        roleId: this.roleId,
        roleMenuRelList: selectedMenu
      };
      this.actions[0].loading = true;
      roleAPI
        .saveAssignedMenu(param)
        .then(data => {
          this.$message.success({
            content: this.$t("module.menuManage.warning.assignMenuSuccessfully"),
            duration: 3
          });
          this.$emit("Close", true);
          this.actions[0].loading = false;
        })
        .catch(() => {
          this.actions[0].loading = false;
        });
    }
  }
};
</script>

<style lang="less">
.role-select-menu-wrap {
  .table-bar {
    display: none;
  }
}
</style>
